<template>
	<div v-loading="loading" class="benefit-member-day">
		<!-- 头部 -->
		<div class="app-main-content-box">
			<div class="app-main-top-box">
				<div class="title">会员日权益</div>
				<div>
					<el-button type="primary" size="medium" round @click="edit({ mode: 'add' })">新增会员日</el-button>
					<!-- <el-button size="medium" round @click="back">返回</el-button> -->
				</div>
			</div>
			<div class="app-main-tips-box">
				<div class="title">
					<i class="el-icon-warning" />
					会员日说明
				</div>
				<ul>
					<li>1.会员日是会员的权益日，你可以添加多个会员日，并配置会员日的营销规则</li>
				</ul>
			</div>
		</div>

		<!-- 内容列表 -->
		<div class="content app-main-content-box">
			<!-- 列表 -->
			<ul>
				<li v-for="item in list" :key="item.right.id" class="cell-item">
					<el-card class="card-container">
						<div class="content-container">
							<!-- 日期 -->
							<div class="date-box">
								<div class="title">{{ dateTypeOptions[item.right.dateType] }}</div>
								<div class="app-text-color-primary">
									<span v-if="item.right.dateType === 1" class="day">{{ item.right.date }}</span>
									<span v-if="item.right.dateType === 1" class="suffix">号</span>
									<span v-if="item.right.dateType === 2" class="week">{{ weekKeyOptions[item.right.date] }}</span>
								</div>
							</div>
							<div class="item-box">
								<div class="title">折扣</div>
								<div v-for="discountItem in item.categories" :key="discountItem.categoryId">
									<div v-if="discountItem.discountAmount" class="right">
										【{{
											cardListOptions.hasOwnProperty(discountItem.categoryId)
												? cardListOptions[discountItem.categoryId].categoryName
												: discountItem.categoryId
										}}】折扣{{ discountItem.discountAmount / 10 }}折
									</div>
								</div>
							</div>
							<div class="item-box">
								<div class="title">积分</div>
								<div v-for="pointItem in item.categories" :key="pointItem.categoryId">
									<div v-if="pointItem.pointTimes" class="right">
										【{{ cardListOptions.hasOwnProperty(pointItem.categoryId) ? cardListOptions[pointItem.categoryId].categoryName : pointItem.categoryId }}】{{
											pointItem.pointTimes / 10
										}}倍积分
									</div>
								</div>
							</div>
							<div class="item-box">
								<div class="title">参与门店</div>
								<div v-if="item.right.shop">{{ item.right.shop.split(',').length }}家门店</div>
								<div v-else>所有门店</div>
							</div>
							<div v-if="superData.status == 1" class="item-box">
								<div class="title">合作商户</div>
								<div v-if="item.right.openSuperMember" style="color: skyblue; cursor: pointer;" @click="coopMerch(item)">
									{{ item.right.superMemberAllJoin ? '全部商户' : '部分商户' }}
								</div>
								<div v-else>无</div>
							</div>
							<div class="btn-box">
								<el-button type="primary" size="small" round @click="edit({ mode: 'edit', row: item })">编辑</el-button>
								<el-button type="danger" size="small" round @click="del(item)">删除</el-button>
							</div>
						</div>
					</el-card>
				</li>
			</ul>

			<!-- 暂无数据 -->
			<div v-show="!loading && list.length === 0" class="no-list">暂未设置会员日</div>
		</div>

		<!-- 编辑弹框 -->
		<DialogEditMemberDay ref="editMemberDay" />
		<DialogMerchCyStatus ref="coopMerchStatus"></DialogMerchCyStatus>
	</div>
</template>

<script>
import { getMemberDayConfigList, saveMemberDayConfig, delMemberDayConfig } from '@/api/marketing';
import { getAllVipCardList } from '@/api/vip';
import { querySuperMemberStatus } from '@/api/business';
import DialogEditMemberDay from './components/DialogEditMemberDay';
import DialogMerchCyStatus from './components/DialogMerchCyStatus';
export default {
	components: {
		DialogEditMemberDay,
		DialogMerchCyStatus
	},
	data() {
		return {
			// 配置
			// weekOptions: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
			dateTypeOptions: ['', '每个自然月', '每个自然周'],
			weekKeyOptions: ['', '周日', '周一', '周二', '周三', '周四', '周五', '周六'],
			// 状态
			loading: false,
			// 数据
			cardList: [],
			cardListOptions: {},
			list: [],
			//超级会员
			superData: '' // status: 0:未开通 1:已开通 2:欠费停用
		};
	},
	mounted() {
		this.fetchData();
	},
	methods: {
		/**
		 * 获取数据
		 */
		// 加载页面
		async fetchData() {
			this.loading = true;
			await this.getCardList();
			this.getMemberDayList();
			this.querySuperMemberStatusFun();
		},

		// 获取所有卡数据
		getCardList() {
			return new Promise((resolve, reject) => {
				getAllVipCardList().then(res => {
					this.cardList = res.data;
					res.data.map(v => {
						this.cardListOptions[v.id] = v;
					});
					resolve();
				});
			});
		},

		// 获取会员日配置列表
		getMemberDayList() {
			getMemberDayConfigList()
				.then(res => {
					this.list = res.data;
				})
				.catch(err => {})
				.finally(() => {
					this.loading = false;
				});
		},

		// 插件状态
		querySuperMemberStatusFun() {
			querySuperMemberStatus().then(res => {
				this.superData = res.data;
			});
		},

		/**
		 * 按钮组
		 */
		// 返回
		back() {
			// this.$router.push({
			//   name: "VipBenefitCenter"
			// });
			this.$router.go(-1);
		},

		// 新增、编辑
		edit({ mode, row = '' }) {
			this.$refs.editMemberDay.open({ mode, row, cardList: this.cardList, superData: this.superData }).then(res => {
				this.fetchData();
			});
		},

		// 删除
		del(row) {
			this.$confirm(`确定删除该会员日?`, '温馨提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true,
				roundButton: true
			})
				.then(() => {
					this.loading = true;
					delMemberDayConfig(row.right.id)
						.then(res => {
							this.$notify({
								title: '成功',
								message: '删除成功',
								type: 'success',
								duration: 2000,
								offset: 40
							});
							this.fetchData();
						})
						.catch(err => {})
						.finally(() => {
							this.loading = false;
						});
				})
				.catch(() => {});
		},

		// 查看合作商户
		coopMerch(item) {
			let prams = {
				mbDayId: item.right.id,
				discount: item.right.discount
			};
			this.$refs.coopMerchStatus.open(prams);
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 内容 */
.content {
	margin-top: 10px;
	/* 列表 */
	.cell-item {
		margin-bottom: 10px;
	}
	.card-container {
		width: 100%;
		min-width: 900px;
	}
	.content-container {
		display: flex;
	}
	/* 日期盒子 */
	.date-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 0 0 160px;
		border-right: 1px solid #dcdfe6;
		.title {
			margin-bottom: 20px;
			font-size: 14px;
		}
		.day {
			font-size: 36px;
			font-weight: bold;
		}
		.week {
			font-size: 24px;
			font-weight: bold;
		}
		.suffix {
			font-weight: bold;
		}
	}
	/* 内容盒子 */
	.item-box {
		padding-left: 20px;
		flex: 1;
		font-size: 14px;
		.title {
			margin-bottom: 10px;
			color: #909399;
		}
		.right {
			margin-bottom: 5px;
		}
	}

	/* 按钮组 */
	.btn-box {
		display: flex;
		flex: 0 0 140px;
		justify-content: flex-end;
		align-items: center;
	}

	/* 没数据 */
	.no-list {
		text-align: center;
		color: $light-font-color;
		font-size: 14px;
	}
}
</style>
